<template>
	<view class="module_img_list" :style="{ width: `${width}rpx` }">
		<view class="module_img upload_btn" :style="[upload_style]" @click="uploadClick()" v-if="showUpload">
			<myimg imgsrc="/static/images/myupload.png" :width="60"></myimg>
			<text class="upload_tt">上传照片</text>
		</view>
		<view class="module_img" v-for="(block, current) in loadingList" :key="current" :style="{ margin: `${margin}rpx` }">
			<myimg
				:imgsrc="block.image"
				:progress="block.progress"
				:width="img_width"
				:radius="radius"
				:urls="loadingList"
				:current="current"
				:showclose="showclose"
				:isUpload="true"
				@closeClick="closeClick($event)"
				@imgClick="imgClick($event)"
				@reUpload="reUpload($event)"
			></myimg>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myImgUpload',
	props: {
		urls: {
			type: [Array, String],
			default() {
				return '';
			},
		},
		urls_split: {
			type: [String],
			default: ',',
		},
		showUpload: {
			type: [Boolean],
			default: false,
		},

		showclose: {
			type: [Boolean],
			default: false,
		},
		width: {
			type: [Number, String],
			default: '100',
		},
		number: {
			type: [Number, String],
			default: 3,
		},
		radius: {
			type: [Number, String],
			default: '0',
		},
		margin: {
			type: [Number, String],
			default: '10',
		},
		// 最大上传图片
		maxUpload: {
			type: [Number, String],
			default: '9',
		},
	},

	data() {
		return {
			loadingList: [],
			doneList: [],
			img_width: 0,
			initOnce: true,
		};
	},
	created() {},
	mounted() {},
	computed: {
		upload_style() {
			let style = {};
			if (this.img_width > 0) {
				style['width'] = `${this.img_width}rpx`;
				style['height'] = `${this.img_width}rpx`;
			}
			if (this.radius > 0) {
				style['border-radius'] = `${this.radius}rpx`;
			}

			if (this.margin > 0) {
				style['margin'] = `${this.margin}rpx`;
			}
			return style;
		},
	},
	methods: {
		// ...common,
		initImgList() {
			let _this = this;
			console.log('initImgList');
			if (!_this.initOnce) return;
			_this.initOnce = false;
			_this.img_width = _this.width / _this.number - _this.margin * 2;
			if (_this.objJudge(_this.urls)) {
				_this.loadingList = _this.urls.split(_this.urls_split).reduce((p, n) => {
					let o = {
						image: n,
						progress: 100,
					};
					p.push(o);
					return p;
				}, []);

				_this.doneList = _this.deepclone(_this.loadingList);
			} else {
				_this.loadingList = [];
				_this.doneList = [];
				return;
			}
		},
		imgClick(event) {
			let _this = this;
			_this.$emit('imgClick', event);
		},
		async closeClick(event) {
			let _this = this;
			let _flag = await _this.com_modal({ title: `提示`, content: '确认删除该图片？' });
			if (_flag) {
				let { urls, current } = event;
				_this.loadingList.splice(current, 1);
				_this.doneList.splice(current, 1);
				_this.check_can_emit();
			}
		},
		async reUpload(event) {
			let _this = this;
			let { urls, current } = event;
			let { image } = urls[current];
			console.log(image);
			await _this.upload_fun(image);
			_this.check_can_emit();
		},
		uploadClick() {
			let _this = this;
			if (_this.loadingList.length >= _this.maxUpload) {
				_this.com_msg(`最多只能上传${_this.maxUpload}张图片`);
				return;
			}
			let can_count = _this.maxUpload - _this.loadingList.length;
			// #ifdef MP-WEIXIN
			uni.chooseMedia({
				count: can_count,
				mediaType: ['image'],
				// mediaType: ['image', 'video'],
				sourceType: ['album', 'camera'],
				// maxDuration: 30,
				camera: 'back',
				async success(res) {
					let { tempFiles } = res;
					for (let index = 0; index < tempFiles.length; index++) {
						let { tempFilePath } = tempFiles[index];
						await _this.upload_fun(tempFilePath);
						console.log(index, 'index');
						console.log(tempFilePath, 'path');
					}
					_this.check_can_emit();
				},
			});
			// #endif

			// #ifdef APP-PLUS
			uni.chooseImage({
				count: can_count,
				mediaType: ['image'],
				// mediaType: ['image', 'video'],
				sourceType: ['album', 'camera'],
				// maxDuration: 30,
				// camera: 'back',
				async success(res) {
					let { tempFiles } = res;
					for (let index = 0; index < tempFiles.length; index++) {
						let { tempFilePath } = tempFiles[index];
						await _this.upload_fun(tempFilePath);
						console.log(index, 'index');
						console.log(tempFilePath, 'path');
					}
					_this.check_can_emit();
				},
			});
			// #endif
		},
		async upload_fun(tempFilePath) {
			let _this = this;
			let index = _this.loadingList.findIndex(item => {
				return item.image == tempFilePath;
			});
			if (index > -1) {
				_this.loadingList[index]['progress'] = 0;
			} else {
				_this.loadingList.push({
					image: tempFilePath,
					progress: 0,
				});
				index = _this.loadingList.length - 1;
			}
			let { data = false } = await _this.com_upload({
				url: '/base/upload_file',
				type: 'upload',
				path: tempFilePath,
				progress: function ({ progress }) {
					// console.log(progress);
					_this.loadingList[index]['progress'] = progress;
				},
			});
			if (data) {
				_this.doneList.push({
					image: data,
					progress: 100,
				});
			} else {
				_this.loadingList[index]['progress'] = -1;
			}
		},
		check_can_emit() {
			let _this = this;
			if (_this.loadingList.length == _this.doneList.length) {
				// let hasFail = _this.loadingList.findIndex(item => {
				// 	return item.progress == -1;
				// });
				// if (hasFail > -1) return;
				let STR = '';
				_this.doneList.forEach(element => {
					STR += STR ? `,${element.image}` : element.image;
				});
				_this.$emit('doneUpload', STR);
			}
		},
	},
	watch: {
		urls: {
			handler(newVal) {
				this.initImgList();
			},
			immediate: true,
		},
	},
};
</script>

<style lang="scss">
.module_img_list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.upload_btn {
	border: 2rpx dashed #999999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.upload_tt {
		margin-top: 4rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #b4b2ba;
		line-height: 29rpx;
	}
}
</style>
